<template>
  <el-form v-if="setting" :model="setting" label-position="top">
    <el-form-item label-width="0" label="选项卡设置">
      <draggable
        tag="ul"
        :list="setting.config.tabs"
        item-key="name"
        v-bind="{
          group: 'panesGroup',
          ghostClass: 'ghost',
          handle: '.drag-option',
        }"
      >
        <template #item="{ element: tpItem, index: tpIdx }">
          <li class="col-item">
            <!-- span style="margin-right: 12px">{{tpIdx + 1}}</span -->
            <el-input
              link
              type="primary"
              v-model="tpItem.label"
              style="width: 70%"
            ></el-input>
            <i class="iconfont icon-drag drag-option"></i>
            <el-button
              circle
              plain
              size="small"
              type="danger"
              @click="deleteTabPane(setting.config.tabs, tpIdx)"
              icon="el-icon-minus"
              class="col-delete-button"
            ></el-button>
          </li>
        </template>
      </draggable>

      <div>
        <el-button link type="primary" @click="addTabPane(setting.config.tabs)"
          >增加选项</el-button
        >
      </div>
    </el-form-item>
  </el-form>
</template>
  <script setup>
import { ElMessage } from "element-plus";
import { ref, defineModel } from "vue";
const setting = defineModel();
const deleteTabPane = (tabs, index) => {
  if (tabs.length === 1) {
    ElMessage.warning({ message: "至少存在一个tab项" });
  } else {
    tabs.splice(index, 1);
  }
};
const addTabPane = (tabs) => {
  var now = new Date();
  const newPane = ({
    label:'tab '+(tabs.length+1),
    name:now.getTime(),
    children:[]
  })
  tabs.push(newPane);
};
</script>
  <style lang="scss" scoped>
li.col-item {
  list-style: none;

  span.col-span-title {
    display: inline-block;
    font-size: 13px;
    width: 120px;
  }

  .col-delete-button {
    margin-left: 6px;
  }
}
</style>